<template>
	<view class="container">
		<!-- 顶部波浪背景 -->
		<view class="wave-bg">
			<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
				<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.21,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="#4a8fe7"></path>
				<path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" fill="#4a8fe7"></path>
				<path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="#4a8fe7"></path>
			</svg>
		</view>
		
		<!-- 头部区域 -->
		<view class="header">
			<text class="title animate__animated animate__fadeInDown">大辛辅导班管理系统</text>
			<view class="search-box animate__animated animate__fadeIn">
				<uni-icons type="search" size="20" color="#999"></uni-icons>
				<input 
					type="text" 
					placeholder="输入学生姓名搜索..." 
					v-model="searchQuery" 
					@input="onInput" 
					class="search-input"
				/>
				<button @click="search" class="search-btn">
					<uni-icons type="paperplane" size="16" color="#fff"></uni-icons>
				</button>
			</view>
		</view>
		
		<!-- 统计卡片 -->
		<view class="stats-container animate__animated animate__fadeInUp">
			<view class="stat-card" @click="filterPaid">
				<text class="stat-number">{{ paidCount }}</text>
				<text class="stat-label">已缴费</text>
				<view class="stat-icon">
					<uni-icons type="checkmark" size="24" color="#4CAF50"></uni-icons>
				</view>
			</view>
			<view class="stat-card" @click="filterUnpaid">
				<text class="stat-number">{{ unpaidCount }}</text>
				<text class="stat-label">未缴费</text>
				<view class="stat-icon">
					<uni-icons type="close" size="24" color="#F44336"></uni-icons>
				</view>
			</view>
			<view class="stat-card" @click="resetFilter">
				<text class="stat-number">{{ totalCount }}</text>
				<text class="stat-label">总人数</text>
				<view class="stat-icon">
					<uni-icons type="person" size="24" color="#2196F3"></uni-icons>
				</view>
			</view>
		</view>
		
		<!-- 学生列表 -->
		<view class="student-list">
			<view 
				v-for="(student, index) in filteredStudents" 
				:key="student.userId" 
				class="student-card animate__animated animate__fadeInUp"
				:style="{'animation-delay': `${index * 0.05}s`}"
				@click="openPopup(student)"
			>
				<!-- 添加序号 -->
				<view class="student-index">
					<text>{{ index + 1 }}</text>
				</view>
				
				<view class="student-avatar">
					<text class="avatar-text">{{ student.studentName.charAt(0) }}</text>
				</view>
				<view class="student-info">
					<text class="name">{{ student.studentName }}</text>
					<text class="grade">{{ student.grade }}</text>
					<text class="phone">{{ student.phoneNumber }}</text>
				</view>
				<view :class="['status-badge', getStatusClass(student.isPay)]">
					{{ getStatusText(student.isPay) }}
				</view>
			</view>
		</view>

		<!-- 弹窗 - 添加catchtouchmove阻止滑动穿透 -->
		<view v-if="showPopup" class="popup-overlay" @click.self="closePopup" catchtouchmove>
			<view class="popup animate__animated animate__zoomIn">
				<view class="popup-header">
					<text class="popup-title">学生详细信息</text>
					<button class="close-btn" @click="closePopup">
						<uni-icons type="closeempty" size="20" color="#999"></uni-icons>
					</button>
				</view>
				<view class="student-details">
					<view class="detail-row">
						<uni-icons type="person" size="16" color="#4a8fe7"></uni-icons>
						<text class="label">姓名:</text>
						<text class="value">{{ selectedStudent.studentName }}</text>
					</view>
					<view class="detail-row">
						<uni-icons type="star" size="16" color="#4a8fe7"></uni-icons>
						<text class="label">年级:</text>
						<text class="value">{{ selectedStudent.grade }}</text>
					</view>
					<view class="detail-row">
						<uni-icons type="contact" size="16, color="#4a8fe7"></uni-icons>
						<text class="label">家长:</text>
						<text class="value">{{ selectedStudent.parentName }}</text>
					</view>
					<view class="detail-row">
						<uni-icons type="phone" size="16" color="#4a8fe7"></uni-icons>
						<text class="label">电话:</text>
						<text class="value">{{ selectedStudent.phoneNumber }}</text>
					</view>
					<view class="detail-row">
						<uni-icons type="location" size="16" color="#4a8fe7"></uni-icons>
						<text class="label">地址:</text>
						<text class="value">{{ selectedStudent.address }}</text>
					</view>
					<view class="detail-row">
						<uni-icons type="help" size="16" color="#4a8fe7"></uni-icons>
						<text class="label">问题:</text>
						<text class="value">{{ selectedStudent.question || '无' }}</text>
					</view>
					<view class="detail-row">
						<uni-icons type="gift" size="16" color="#4a8fe7"></uni-icons>
						<text class="label">优惠码:</text>
						<text class="value">{{ selectedStudent.promoCode || '无' }}</text>
					</view>
					<view class="detail-row">
					    <uni-icons type="calendar" size="16" color="#4a8fe7"></uni-icons>
					    <text class="label">填写时间:</text>
					    <text class="value">{{ formatTime(selectedStudent.postTime) || '无' }}</text>
					</view>
					<view class="detail-row">
					    <uni-icons type="wallet" size="16" color="#4a8fe7"></uni-icons>
					    <text class="label">缴费状态:</text>
					    <text class="value">{{ getStatusText(selectedStudent.isPay) }}</text>
					</view>
				</view>
				<input 
					v-if="selectedStudent.isPay !== 2" 
					type="number" 
					v-model="amount" 
					placeholder="请输入缴费金额" 
					class="amount-input"
					focus
				/>
				<view v-if="selectedStudent.isPay !== 2" class="popup-buttons">
					<button class="submit-button" @click="submitPayment">
						<text>{{ selectedStudent.isPay === 0 ? '确认缴费' : '确认补缴' }}</text>
						<uni-icons type="checkmarkempty" size="16" color="#fff"></uni-icons>
					</button>
				</view>
			</view>
		</view>
		
		<!-- 确认缴费弹窗 -->
		<view v-if="showConfirmDialog" class="confirm-dialog-overlay" catchtouchmove>
			<view class="confirm-dialog animate__animated animate__zoomIn">
				<text class="confirm-title">确认缴费</text>
				<text class="confirm-content">确认{{ selectedStudent.studentName }} {{ selectedStudent.isPay === 0 ? '缴纳' : '补缴' }} {{ amount }}元？</text>
				<view class="confirm-buttons">
					<button class="confirm-button cancel" @click="showConfirmDialog = false">取消</button>
					<button class="confirm-button confirm" @click="confirmPayment">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { globalVariable } from '../../configMy.js';
	
	export default {
		data() {
			return {
				searchQuery: '',
				students: [],
				filteredStudents: [],
				showPopup: false,
				showConfirmDialog: false,
				selectedStudent: {
					userId: 0,
					studentName: '',
					parentName: '',
					phoneNumber: '',
					address: '',
					question: '',
					isPay: 0,
					postTime: '',
					promoCode: null,
					grade: null,
					aver: null,
					openId: '',
					openID: ''
				},
				amount: '',
				filterType: 'all'
			};
		},
		onLoad() {
			this.fetchStudents();
		},
		computed: {
			paidCount() {
				return this.students.filter(student => student.isPay === 2).length;
			},
			unpaidCount() {
				return this.students.filter(student => student.isPay === 0).length;
			},
			totalCount() {
				return this.students.length;
			}
		},
		methods: {
			getStatusText(status) {
				switch(status) {
					case 0: return '未缴费';
					case 1: return '已缴定金';
					case 2: return '已完成';
					default: return '未知';
				}
			},
			getStatusClass(status) {
				switch(status) {
					case 0: return 'unpaid';
					case 1: return 'partial';
					case 2: return 'paid';
					default: return '';
				}
			},
			formatTime(isoString) {
				if (!isoString) return null;
				
				try {
					const date = new Date(isoString);
					// 格式化为：2025年6月6日 19:16
					return `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
				} catch (e) {
					console.error('时间格式化错误:', e);
					return isoString; // 如果格式化失败，返回原始字符串
				}
			},
			fetchStudents() {
				let that = this;
				uni.showLoading({
					title: '加载中...'
				});
				uni.request({
					url: globalVariable+"/getAllUsers",
					success(data) {
						uni.hideLoading();
						let info = data.data;
						if (info.status == 1) {
							that.students = info.data;
							that.updateFilteredStudents();
						}
					},
					fail() {
						uni.hideLoading();
						uni.showToast({
							title: "网络错误，请重试",
							icon: "none"
						});
					}
				});
			},
			onInput() {
				this.search();
			},
			search() {
				const query = this.searchQuery.trim().toLowerCase();
				this.updateFilteredStudents(query);
			},
			openPopup(student) {
				this.selectedStudent = {...student};
				this.amount = '';
				this.showPopup = true;
			},
			closePopup() {
				this.showPopup = false;
				this.amount = '';
			},
			submitPayment() {
				if (!this.amount) {
					uni.showToast({
						title: "请输入金额",
						icon: "none"
					});
					return;
				}
				this.showConfirmDialog = true;
			},
			confirmPayment() {
				let that = this;
				this.showConfirmDialog = false;
				
				uni.showLoading({
					title: '处理中...'
				});
				
				let thisUrl = globalVariable+"/payMoneyAdmin?payMoney=" + that.amount +
					"&userId=" + that.selectedStudent.userId +
					"&userName=" + that.selectedStudent.studentName +
					"&phoneNumber=" + that.selectedStudent.phoneNumber;
				
				uni.request({
					url: thisUrl,
					method: 'GET',
					success(res) {
						uni.hideLoading();
						let info = res.data;
						if (info.status == 1) {
							uni.showToast({
								title: '缴费成功',
								icon: "success",
								duration: 2000
							});
							// 更新缴费状态
							that.selectedStudent.isPay = that.amount >= 1000 ? 2 : 1;
							// 更新列表中的学生数据
							const index = that.students.findIndex(s => s.userId === that.selectedStudent.userId);
							if (index !== -1) {
								that.students[index].isPay = that.selectedStudent.isPay;
							}
							that.updateFilteredStudents();
							that.closePopup();
						} else {
							uni.showToast({
								title: info.message || '操作失败',
								icon: "none",
								duration: 2000
							});
						}
					},
					fail() {
						uni.hideLoading();
						uni.showToast({
							title: "网络错误，请重试",
							icon: "none"
						});
					}
				});
			},
			filterPaid() {
				this.filterType = 'paid';
				this.updateFilteredStudents();
			},
			filterUnpaid() {
				this.filterType = 'unpaid';
				this.updateFilteredStudents();
			},
			resetFilter() {
				this.filterType = 'all';
				this.updateFilteredStudents();
			},
			updateFilteredStudents(query = '') {
				const lowerCaseQuery = query.trim().toLowerCase();
				this.filteredStudents = this.students.filter(student => {
					const matchesQuery = student.studentName.toLowerCase().includes(lowerCaseQuery);
					if (this.filterType === 'paid') {
						return student.isPay === 2 && matchesQuery;
					} else if (this.filterType === 'unpaid') {
						return student.isPay === 0 && matchesQuery;
					}
					return matchesQuery;
				});
			}
		}
	};
</script>

<style lang="scss">
	/* 引入动画库 */
	@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");
	
	.container {
		position: relative;
		min-height: 100vh;
		background-color: #f5f7fa;
		padding-bottom: 30px;
	}
	
	.wave-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 120px;
		overflow: hidden;
		z-index: 0;
		
		svg {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	
	.header {
		position: relative;
		z-index: 1;
		padding: 20px 15px 15px;
		
		.title {
			display: block;
			font-size: 24px;
			font-weight: bold;
			color: #fff;
			text-align: center;
			margin-bottom: 20px;
			text-shadow: 0 2px 4px rgba(0,0,0,0.1);
		}
	}
	
	.search-box {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 30px;
		padding: 8px 15px;
		box-shadow: 0 4px 12px rgba(74, 143, 231, 0.15);
		
		.uni-icons {
			margin-right: 8px;
		}
		
		.search-input {
			flex: 1;
			font-size: 14px;
			color: #333;
			border: none;
			outline: none;
		}
		
		.search-btn {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: linear-gradient(135deg, #4a8fe7, #6a5acd);
			display: flex;
			align-items: center;
			justify-content: center;
			border: none;
			box-shadow: 0 2px 6px rgba(74, 143, 231, 0.3);
			transition: all 0.3s;
			
			&:active {
				transform: scale(0.95);
			}
		}
	}
	
	.stats-container {
		display: flex;
		justify-content: space-between;
		padding: 15px;
		margin-top: 10px;
		
		.stat-card {
			flex: 1;
			background: #fff;
			border-radius: 12px;
			padding: 15px 10px;
			margin: 0 5px;
			text-align: center;
			box-shadow: 0 4px 10px rgba(0,0,0,0.05);
			position: relative;
			overflow: hidden;
			transition: all 0.3s;
			
			&:active {
				transform: translateY(2px);
			}
			
			.stat-number {
				display: block;
				font-size: 24px;
				font-weight: bold;
				color: #333;
				margin-bottom: 5px;
			}
			
			.stat-label {
				font-size: 12px;
				color: #666;
			}
			
			.stat-icon {
				position: absolute;
				right: 10px;
				top: 10px;
				opacity: 0.2;
			}
		}
	}
	
	.student-list {
		padding: 0 15px;
		margin-top: 15px;
	}
	
	.student-card {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 12px;
		padding: 15px;
		margin-bottom: 12px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		transition: all 0.3s;
		
		&:active {
			transform: translateY(2px);
			box-shadow: 0 1px 4px rgba(0,0,0,0.1);
		}
		
		.student-index {
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background: #f0f4ff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 12px;
			
			text {
				font-size: 12px;
				color: #4a8fe7;
				font-weight: bold;
			}
		}
		
		.student-avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: linear-gradient(135deg, #4a8fe7, #6a5acd);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 12px;
			
			.avatar-text {
				color: #fff;
				font-size: 18px;
				font-weight: bold;
			}
		}
		
		.student-info {
			flex: 1;
			
			.name {
				display: block;
				font-size: 16px;
				font-weight: 500;
				color: #333;
				margin-bottom: 2px;
			}
			
			.grade {
				font-size: 12px;
				color: #666;
				margin-right: 8px;
			}
			
			.phone {
				font-size: 12px;
				color: #999;
			}
		}
		
		.status-badge {
			padding: 4px 10px;
			border-radius: 20px;
			font-size: 12px;
			font-weight: 500;
			
			&.paid {
				background: rgba(76, 175, 80, 0.15);
				color: #4CAF50;
			}
			
			&.partial {
				background: rgba(255, 193, 7, 0.15);
				color: #FFC107;
			}
			
			&.unpaid {
				background: rgba(244, 67, 54, 0.15);
				color: #F44336;
			}
		}
	}
	
	.popup-overlay, .confirm-dialog-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
		backdrop-filter: blur(5px);
	}
	
	.popup {
		width: 85%;
		max-width: 400px;
		background: #fff;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 10px 30px rgba(0,0,0,0.15);
		z-index: 1001;
		
		.popup-header {
			padding: 15px;
			background: linear-gradient(135deg, #4a8fe7, #6a5acd);
			position: relative;
			
			.popup-title {
				font-size: 18px;
				font-weight: bold;
				color: #fff;
				text-align: center;
			}
			
			.close-btn {
				position: absolute;
				right: 10px;
				top: 10px;
				background: rgba(255,255,255,0.2);
				width: 30px;
				height: 30px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				border: none;
			}
		}
		
		.student-details {
			padding: 20px 15px;
			
			.detail-row {
				display: flex;
				align-items: center;
				margin-bottom: 12px;
				
				.uni-icons {
					margin-right: 8px;
					color: #4a8fe7;
				}
				
				.label {
					font-size: 14px;
					color: #666;
					width: 60px;
				}
				
				.value {
					flex: 1;
					font-size: 14px;
					color: #333;
					word-break: break-all;
				}
			}
		}
		
		.amount-input {
			margin: 0 15px 20px;
			padding: 12px 15px;
			border: 1px solid #eee;
			border-radius: 8px;
			font-size: 16px;
			width: calc(100% - 30px);
			box-sizing: border-box;
			height: 100rpx;
			&:focus {
				border-color: #4a8fe7;
			}
		}
		
		.popup-buttons {
			padding: 0 15px 20px;
			
			.submit-button {
				width: 100%;
				background: linear-gradient(135deg, #4a8fe7, #6a5acd);
				color: #fff;
				border: none;
				border-radius: 8px;
				padding: 12px;
				font-size: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4px 12px rgba(74, 143, 231, 0.3);
				transition: all 0.3s;
				
				.uni-icons {
					margin-left: 6px;
				}
				
				&:active {
					transform: translateY(2px);
					box-shadow: 0 2px 6px rgba(74, 143, 231, 0.3);
				}
			}
		}
	}
	
	.confirm-dialog {
		width: 80%;
		max-width: 350px;
		background: #fff;
		border-radius: 16px;
		padding: 20px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.2);
		z-index: 1002;
		
		.confirm-title {
			display: block;
			font-size: 18px;
			font-weight: bold;
			color: #333;
			text-align: center;
			margin-bottom: 15px;
		}
		
		.confirm-content {
			display: block;
			font-size: 16px;
			color: #666;
			text-align: center;
			margin-bottom: 20px;
			line-height: 1.5;
		}
		
		.confirm-buttons {
			display: flex;
			justify-content: space-between;
			
			.confirm-button {
				flex: 1;
				padding: 10px;
				border-radius: 8px;
				font-size: 16px;
				border: none;
				margin: 0 5px;
				
				&.cancel {
					background: #f0f0f0;
					color: #666;
				}
				
				&.confirm {
					background: linear-gradient(135deg, #4a8fe7, #6a5acd);
					color: #fff;
				}
			}
		}
	}
	
	/* 动画效果 */
	.animate__animated {
		--animate-duration: 0.5s;
	}
	
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes zoomIn {
		from {
			opacity: 0;
			transform: scale(0.8);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}
</style>